<template>
  <el-container
    v-loading="loading"
  >
    <!-- 右侧菜单 -->
    <el-container>
      <!-- 功能按钮组 -->
      <el-header height="42px">
        <span class="ik-report-title">
          <span class="svg-container ik-report-icon">
            <svg-icon icon-class="database" />
          </span>
          数据列表
        </span>
        <!-- 测试菜单 -->
        <el-button-group class="ik-report-menu">
          <el-button class="ik-report-menu-btn" size="medium">新增</el-button>
          <el-button class="ik-report-menu-btn" size="medium">修改</el-button>
          <el-button class="ik-report-menu-btn" size="medium">详情</el-button>
          <el-button class="ik-report-menu-btn" size="medium">删除</el-button>
          <el-button class="ik-report-menu-btn" size="medium">导出</el-button>
          <el-button class="ik-report-menu-btn" size="medium">导入</el-button>
        </el-button-group>
      </el-header>

      <el-main>
        <!-- 数据表 -->
        <el-row class="table-title">
          <el-col :span="16">
            <span>分析报表</span>
          </el-col>
        </el-row>
      </el-main>

      <!-- 分页组件 -->
      <el-footer height="40px">
        <el-row class="ik-report-info" :gutter="0">
          <el-col :span="12" class="ik-report-enterprise-info">
            <span style="float: left">{{ sysTitle }}</span>
          </el-col>
        </el-row>
      </el-footer>
    </el-container>

  </el-container>
</template>

<script>

export default {
  components: {
  },
  props: {
  },
  data() {
    return {
      pagination: {
        pageNo: 1,
        pageSize: 20,
        totalCount: 5
      },
      loading: false,
      listLoading: false,
      sysTitle: ''
    }
  },
  computed: {
  },
  watch: {
  },
  created() {
  },
  methods: {
  }
}
</script>

<style lang="scss" >
/* 布局样式 */
.el-aside {
  height: calc(100vh - 88px);
  width: 100%;
  border-right: 1px solid #1482f0;
}
.el-header, .el-footer {
  padding: 0px;
  background-color: #FFFFFF;
  border-color: #FFFFFF;
}
.el-header {
  height: 42px;
  border-bottom: 1px solid #1482f0;
}
.el-footer {
  height: 36px;
}

.el-main {
  height: calc(100vh - 82px - 90px);
  padding: 0px;
  text-align: center;
}

/* 菜单样式 */
.ik-report-title{
  background-color: #FFFFFF;
  color: #1482f0;
  margin-left: 25px;
  width: 300px;
  height: 42px;
  line-height: 42px;
  font-size: 14px;
}
.ik-report-menu {
  margin-top: 3px;
  margin-left: 20px;
  float: right;
}
.ik-report-menu-btn {
  background-color: #1482f0;
  color: #FFFFFF;
  border-radius:25px;
}
.searcher{
  overflow: hidden!important;
}
.searcher .el-dialog__header{
  padding: 0px;
  display:none;
}

.searcher .el-dialog__body{
  padding: 0px;
  height: 100%;
}

/* 页脚 */
.ik-report-info {
  background-color: #1482f0;
  color: #FFFFFF;
  height: 36px;
}
/* 企业信息 */
.ik-report-enterprise-info {
  padding-left: 20px;
  font-size: 14px;
  line-height: 40px;
}
/* 记录信息 */
.ik-report-data-info {
  padding-right: 20px;
  font-size: 14px;
  line-height: 40px;
}
</style>

<style lang="scss" scoped>
  .el-table{
    .el-table__fixed {
      height:auto !important;
      bottom:17px;
    }
    /* 表格样式 */
    .ik-report-table-header-cell {
      padding:0;
      height: 40px;
      line-height: 40px;
      background-color: #F4F7FC;
      color:#555555;
      border-color: #E7E7E7;

    }
    .ik-report-table-header-row {
      padding:0;
      height: 50px;
      line-height: 50px;
      background-color: #F4F7FC;
      color:#555555;
      border-color: #E7E7E7;
      th{
        padding:0;
      }

    }
    .ik-report-table-header-row .ik-report-table-header-cell> .cell{
      text-overflow:ellipsis ;
      white-space: nowrap;
    }
    .ik-report-table-body-row {
      padding:0;
      height: 45px;
      line-height: 45px;
    }
    .ik-report-table-body-row-hide {
      display: none;
    }
    .ik-report-table-body-cell {
      padding:0;
      // height: 40px;
      // line-height: 40px;
    }
  }
  /* 菜单样式 */
  .ik-table-menu {
    z-index: 2000;
    position: fixed;
    padding: 0px;
    color: #000000;
    border-radius: 5px;
    border: 1px solid #999999;
    background-color: #FFFFFF;
  }
  .ik-report-table{
    // overflow-x: scroll;
    ::v-deep.el-table__body-wrapper{
      //加上不显示
      height: calc(100% - 50px)!important;
    }
  }

  .ik-table-menu-item {
    padding-right: 20px;
    padding-left: 20px;
    width: 120px;
    height: 30px;
    cursor: pointer;
    border-radius: 5px;
    display: block;
    line-height: 30px;
    text-align: center;
  }
  li:hover {
    background-color: #1790ff;
    color: #FFFFFF;
  }
</style>
